@charset "utf-8";
$blue:#0e448c;
$org:#eb3d00;
$famliy:'宋体';

/* reset */
body,h1,h2,h3,h4,h5,p,dl,dt,dd,ul,ol,li,form,input,textarea,th,tr,td,select,figure,figcaption {margin: 0;padding: 0;}
body {font-size: 12px;font-family: Arial, 微软雅黑;color: #333;}
h1,h2,h3,h4,h5 {font-weight: normal;}
em,i {font-style: normal;}
li {list-style: none;}
a {text-decoration: none;color: inherit;}
a:focus {text-decoration: none;outline: none;}
img {border: none;max-width: 100%;max-height: 100%;vertical-align: bottom;}
table {border-collapse: collapse;}
input,textarea {outline: none;background: #fff;border: none;}
textarea {resize: none;overflow: auto;}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {-webkit-transition-delay: 99999s;-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;}

/* public */

body {overflow-x : hidden;}
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {content: '';display: block;height: 0;clear: both;visibility: hidden;}
// .container{width: 100%;max-width: 100%;margin: 0 auto;}
.main {width: 100%;max-width: 1200px;margin: 0 auto;}
.fixed {position: fixed;left: 0;top: 0;z-index: 999;}
.btn {font-family: '微软雅黑';cursor: pointer;}
.bl {display: inline-block;float: left;}
.br {display: inline-block;float: right;}
h1,h2,h3,h4,h5 {font-weight: normal;}
.img_box {display: table-cell;  vertical-align: middle; text-align: center;}
.img-box {position: relative;}
.img-box img{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}


.contact .item{counter-reset:'.contact';counter-increment:count;}
.contact .item::before{content:counter(count)'.';}
.ibox .a::before{content:'KC:';}


@mixin icon($width,$height,$url) {
	content: '';
	width: $width;
	height: $height;
	display: inline-block;
	vertical-align: text-bottom;
	background: url('../images/'+$url) no-repeat center/$width $height;
}


@mixin color-block($width,$height,$color) {
	content: '';
	width: $width;
	height: $height;
	display: inline-block;
	background-color: $color;
	vertical-align: text-bottom;
}


@mixin transition($time) {
	-webkit-transition: all $time ease 0s;
	-moz-transition: all $time ease 0s;
	-ms-transition: all $time ease 0s;
	-o-transition: all $time ease 0s;
	transition: all $time ease 0s;
}


@mixin omit{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}


@mixin ellipsis($num) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: $num;
}


.header{
	z-index: 10;
	width: 100%;
	height: 153px;
	margin: 0 auto;
	position: absolute;
	background: url('../images/top.png') no-repeat center;
	background-size: contain;
	&::after{
		top: 0;
		z-index: -1;
		position: absolute;
		@include color-block(20vw,117px,$blue);
		
	}
	&::before{
		top: 0;
		right: 0;
		z-index: -1;
		position: absolute;
		@include color-block(20vw,153px,$blue);
		
	}
	
	
	.container{
		margin: 0 auto;
		max-width: 1200px;
		// position: relative;
		h1{
			width: 90px;
			height: 117px;
			margin-left: -100px;
			position: absolute;
			display: inline-block;
			background: url('../images/logo.png') no-repeat center/90px 78px;
			a{
				width: 90px;
				height: 117px;
				display: block;
				text-indent: -9999px;
			}
		}
		> ul{
			margin: 0 20px;
			display: inline-block;
			vertical-align: bottom;
			> li{
				float: left;
				position: relative;
				@include transition(.5s);
				&:not(:first-of-type)>a::after{
					content: '>';
					font-size: 20px;
					display: inline-block;
					font-family: '宋体';
					font-weight: bold;
					margin-left: 5px;
					transform: rotate(90deg);
					@include transition(.5s);
				}
				&:hover:not(:first-of-type)>a::after{
					transform: rotate( 90deg - 180deg );
				}
				a{
					color: #FFFFFF;
					font-size: 18px;
					display: inline-block;
					margin: 0 15px;
					line-height: 70px;
					text-align: center;
					white-space: nowrap;
					@include transition(.5s);
				}
				>ul{
					left: 0;
					top: 100%;
					height: 0;
					background-color: $blue;
					position: absolute;
					text-align: left;
					overflow: hidden;
					@include transition(.5s);
					> li{
						width: 100%;
						> a.tit{
							min-width: 220px;
							position: relative;
							&::after{
								top: 50%;
								right: 10%;
								content: '>';
								font-size: 20px;
								display: inline-block;
								font-family: '宋体';
								font-weight: bold;
								position: absolute;
								@include transition(.5s);
								transform: translate(-50%,-50%) rotate(90deg);
							}
							&.on::after{
								transform: translate(-50%,-50%) rotate( 90deg - 180deg );
							}
							a{
								font-weight: bold;
							}
						}
						a{
							margin: 0;
							font-size: 21px;
							width: 100%;
							line-height: 50px;
							padding: 0 20px;
							text-align: left;
							-webkit-box-sizing: border-box;
							-moz-box-sizing: border-box;
							box-sizing: border-box;
						}
						> ul{
							li{
								&:hover{
									> a{
										color: #00a0e9;
									}
								}
							}
						}
						&:hover{
							> a{
								color: #00a0e9;
							}
						}
					}
				}
				&:nth-of-type(2):hover > ul{height: auto;}
				&:nth-of-type(3):hover > ul{max-height: 400px;height: auto;}
				&:nth-of-type(4):hover > ul{height: auto;}
				&:nth-of-type(5):hover > ul{height: auto;}
			}
		}
		i.search{
			width: 57px;
			height: 117px;
			margin: 0 20px;
			cursor: pointer;
			display: inline-block;
			vertical-align: bottom;
			@include transition(.5s);
			background: url('../images/search.png') no-repeat center bottom 25px;
			&:hover{
				background-color: #00a0e9;
			}
		}
		.search-box{
			display: inline-block;
			position: relative;
			vertical-align: top;
			.head_form{
				line-height: 34px;
				width: 233px;
				height: 133px;
				display: none;
				vertical-align: top;
				background-color: #00a0e9;
				top: 100%;
				right: 0;
				position: absolute;
				form{
					position: relative;
					padding: 10px;
				}
				input{
					width: 209px;
					height: 34px;
					text-indent: 5px;
					margin: 15px 0;
				}
				button{
					width: 209px;
					height: 34px;
					border: none;
					color: #FFFFFF;
					cursor: pointer;
					background-color: #0e448c;
					@include transition(.5s);
					&:hover{
						background-color: #0e448c - #111111;
					}
				}
			}
		}
	}
	.login_form{
		width: 390px;
		height: 113px;
		color: #FFFFFF;
		display: inline-block;
		vertical-align: top;
	}
	.left{
		width: 80px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		margin-top: 10px;
		.img-box{
			width: 80px;
			height: 80px;
			display: block;
			margin: 0 auto;
			border-radius: 50%;
			border: 1px solid #829fd2;
			img{
				width: 100%;
				height: 100%;
				padding: 5px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				object-fit: cover;
				border-radius: 50%;
			}
		}
		p{
			font-size: 12px;
			line-height: 22px;
		}
	}
	.right{
		margin: 10px 0 0 10px;
		vertical-align: middle;
		display: inline-block;
		.input-box,.btn-box{
			display: inline-block;
			vertical-align: middle;
		}
		.name,.pass{
			width: 162px;
			height: 32px;
			margin: 10px 0;
			overflow: hidden;
			padding-left: 38px;
			border-radius: 4px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			box-shadow:inset 0px 0px 3px 0px rgba(32,23,21,.42);
		}
		.name{
			background:#FFFFFF url('../images/icon01.png') no-repeat left 10px bottom -35px;
		}
		.pass{
			background:#FFFFFF url('../images/icon01.png') no-repeat left 10px bottom 7px;
		}
		input{
			width: 100%;
			text-indent: 8px;
			line-height: 32px;
			background-color: transparent;
		}
		.btn-box{
			margin-left: 10px;
		}
		button,a.reg{
			border: 0px;
			width: 100%;
			height: 32px;
			margin: 5px 0 5px;
			outline: none;
			color: #333333;
			cursor: pointer;
			line-height: 32px;
			text-align: center;
			border-radius: 4px;
			display: inline-block;
			vertical-align: text-top;
			text-transform: uppercase;
			background-color: #FFFFFF;
			box-shadow:inset 0px 0px 3px 0px rgba(32,23,21,.42);
			@include transition(.5s);
			&:hover{
				background-color: #CCCCCC;
			}
			&:active{
				background-color: #FFFFFF;
			}
		}
		a.reg{
			color: #FFFFFF;
			letter-spacing: -1px;
			border: 1px solid #d90419;
			background-image: linear-gradient(#e60012,#890000);
			&:active{
				background-image: linear-gradient(#890000,#e60012);
			}
		}
		
		
		.btn-box a.forgot{
			width: 119px;
			height: 32px;
			margin: 5px 0 5px 10px;
			display: block;
			border: 1px dashed #af7028;
			color: #ec6941;
			text-align: center;
			font-size: 11px;
			line-height: 32px;
			border-radius: 4px;
			@include transition(.5s);
			&:hover{
				opacity: .8;
			}
			&:active{
				opacity: 1;
			}
		}
	}
	
	
	
	div.right{
		width: 265px;
		margin-left: 40px;
		h3{
			font-size: 24px;
			line-height: 24px;
			vertical-align: top;
			display: inline-block;
		}
		a{
			float: right;
			width: 136px;
			height: 24px;
			line-height: 24px;
			text-align: center;
			border-radius: 3px;
			vertical-align: top;
			display: inline-block;
			vertical-align: bottom;
			background-color: #05589b;
			@include transition(.5s);
			&:hover{
				background-color: #05589b + #111111;
			}
		}
		.edit{
			margin-top: 10px;
		}
		
		span{
			width: 120px;
			font-size: 16px;
			margin-top: 10px;
			line-height: 30px;
			display: inline-block;
		}
	}
	.since{
		width: 100%;
		font-size: 14px;
		line-height: 22px;
		text-align: right;
		margin-bottom: 15px;
		text-transform: uppercase;
		&::after{
			top: 0;
			right: 0;
			content: '';
			width: 35vw;
			z-index: -1;
			height: 22px;
			position: absolute;
			display: inline-block;
			vertical-align: text-bottom;
			background: url('../images/top1.png') repeat-x;
			background-size: 100% 100%;
		}
	}
	// }
}


.emp{
	height: 115px;
}


.banner{
	z-index: 5;
	max-height: 500px;
	overflow: hidden;
	position:relative;
	text-align: center;
	background-color: #000000;
	img{
		width:100%;
		height: 500px;
		object-fit: cover;
		max-width: 1920px;
	}
	.hd{
		width:100%;
		padding:20px 0;
		text-align:center;
		position:absolute;
		left:0;
		bottom:0;
		transform: none;
		top: auto;
		z-index: 1;
		ul{
			display:inline-block;
			li{
				width:50px;
				height:3px;
				opacity: .4;
				transform: translate(0,-50%);
				vertical-align: middle;
				display:inline-block;
				float:left;
				background-color:#FFFFFF;
				margin:0 8px;
				cursor:pointer;
				text-indent:-9999px;
				&.on{
					width:50px;
					height: 3px;
					opacity: 1;
					background-repeat: no-repeat;
					background-position: center;
					background-color: #FFFFFF;
				}
			}
		}
	}
	
	.next,.prev{
		top: 50%;
		width: 39px;
		height: 50px;
		color: #FFFFFF;
		font-size: 40px;
		line-height: 50px;
		font-family: '宋体';
		font-weight: bold;
		position: absolute;
		transform: translate(-50%,-50%);
		background: rgba(0,0,0,.5);
		cursor: pointer;
	}
	.prev{
		left: calc(50% - 580px);
	}
	.next{
		right: calc(50% - 620px);
	}
	&.other-banner{
		img{
			height: 350px;
			object-fit: cover;
		}
	}
}


.imain{
	padding-bottom: 55px;
	background: #dcdede url('../images/icon02.png') no-repeat left 10px bottom 390px;
	.inews{
		float: left;
		width: 330px;
		margin-top: -100px;
		height: 1190px;
		z-index: 10;
		display: inline-block;
		background-color: #c2c1c1;
		position: relative;
		
		.img{
			width: 330px;
		}
		
		.box1{
			position: relative;
			.img-box{
				width: 330px;
				height: 370px;
			}
			&:hover{
				img{
					transform: translate(-50%, -50%) scale(1.1);
				}
			}
			p{
				color: #FFFFFF;
				position: absolute;
				left: 20px;
				bottom: 30px;
				font-size: 35px;
				line-height: 35px;
				transform: scaleY(1.5);
				width: 230px;
				letter-spacing: -1px;
				font-weight: bold;
			}
		}
		.box2 .img-box{
			width: 330px;
			height: 210px;
		}
		
		.img-box{
			overflow: hidden;
			img{
				@include transition(.5s);
			}
			&:hover{
				img{
					transform: translate(-50%, -50%) scale(1.1);
				}
			}
		}
		
		
		
		.inews-slide{
			margin-left: 25px;
			li{
				margin: 10px 0;
			}
			h4{
				font-size: 16px;
				line-height: 30px;
				@include omit();
			}
			p{
				font-size: 14px;
				line-height: 25px;
			}
		}
		
		.more{
			left: 20px;
			bottom: 22px;
			width: 104px;
			height: 34px;
			color: #7d7876;
			font-size: 20px;
			line-height: 34px;
			border-radius: 4px;
			text-align: center;
			position: absolute;
			display: inline-block;
			background-color: #d8d8d8;
			@include transition(.5s);
			&:hover{
				color: #8e8987;
				background-color: #e9e9e9;
			}
		}
		h3{
			margin-top: 15px;
			margin-left: 20px;
			font-size: 42px;
			padding: 20px 0;
			color: #FFFFFF;
			text-indent: 5px;
			border-bottom: 2px solid #FFFFFF;
		}
	}
	.ipro{
		width: 845px;
		float: right;
		display: inline-block;
		position: relative;
		.video-box{
			margin: 24px 0;
			position: relative;
			background: linear-gradient(to bottom,#da251d,#b22827);
			.img-box{
				float: left;
				width: 675px;
				height: 440px;
				position: relative;
				display: inline-block;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				&::after{
					content: '';
					width: 85px;
					height: 85px;
					top: 50%;
					left: 50%;
					border-radius: 50%;
					position: absolute;
					display: inline-block;
					border: 5px solid rgba(255,255,255,.4);
					transform: translate(-50%,-50%);
				}
				&::before{
					content: '';
					top: 50%;
					left: 50%;
					position: absolute;
					z-index: 1;
					display: inline-block;
					transform: translate(-40%,-50%);
					border-width: 30px 0px 30px 30px;
					border-style: solid;
					border-color: transparent transparent transparent rgba(255,255,255,.4);
				}
			}
			p{
				top: 50%;
				float: left;
				width: 240px;
				left: 77%;
				letter-spacing: 0;
				font-size: 40px;
				font-weight: bold;
				position: absolute;
				transform: translateY(-50%) scaleX(.7);
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				color: #FFFFFF;
				display: inline-block;
			}
		}
		.list{
			position: relative;
			margin: 24px 0;
			.img-box{
				width: 845px;
				height: 355px;
				overflow: hidden;
				img{
					@include transition(.5s);
				}
			}
			&:hover{
				.img-box{
					img{
						transform: translate(-50%, -50%) scale(1.1);
					}
				}
			}
			p{
				color: #FFFFFF;
				bottom: 0;
				font-size: 44px;
				position: absolute;
				letter-spacing: 0;
				font-weight: bold;
				transform: translateY(-50%) scaleX(0.7);
			}
			&:nth-of-type(2) p{
				width: 65%;
				right: 0;
				text-align: right;
			}
			&:nth-of-type(3) p{
				width: 50%;
				left: 0;
			}
		}
	}
	.bottom{
		.img-box{
			width: 40%;
			float: left;
			height: 265px;
			overflow: hidden;
			img{
				@include transition(.5s);
				transform: translate(-50%, -50%) scale(1.1);
			}
			&:hover{
				img{
					transform: translate(-50%, -50%) scale(1.3);
				}
			}
			&:nth-of-type(2){
				width: 60%;
			}
			&:nth-of-type(2){
				width: 60%;
			}
		}
	}
}


.footer{
	height: 290px;
	background-color: #3f3a39;
	box-shadow: 0 0 16px rgba(0,0,0,.75);
	.footer1{
		padding-top: 45px;
		.left{
			width: 500px;
			font-size: 16px;
			vertical-align: top;
			display: inline-block;
			ul{
				margin-bottom: 55px;
			}
			li{
				float: left;
				padding: 0 15px;
				position: relative;
				&::after{
					left: 8px;
					bottom: 0;
					position: absolute;
					@include color-block(14px,1px,#b2121e);
				}
				a{
					color: #FFFFFF;
					font-size: 13px;
					line-height: 25px;
					@include transition(.5s);
					&:hover{
						color: #AAAAAA;
					}
				}
			}
			.text-box{
				color: #FFFFFF;
				display: block;
				font-size: 13px;
				line-height: 18px;
			}
		}
		.center{
			display: inline-block;
			margin: 0 150px 0 60px;
		}
		.right{
			display: inline-block;
			.box1{
				width: 100px;
				padding: 7px;
				margin: 0 5px;
				border-radius: 4px;
				vertical-align: top;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
				display: inline-block;
				background-color: #695a52;
				text-align: center;
				.img_box{
					width: 87px;
					height: 35px;
				}
				p{
					margin: 8px 0;
					color: #FFFFFF;
					font-size: 12px;
					font-weight: bold;
				}
				a{
					color: #FFFFFF;
					background-color: #0e448c;
					display: inline-block;
					border-radius: 4px;
					display: inline-block;
					width: 44px*2;
					height: 23px;
					line-height: 23px;
					@include transition(.5s);
					&:hover{
						color: #FFFFFF - #111111;
						background-color:#0e448c -  #111111;
					}
				}
			}
			.box2{
				margin: 0 5px;
				display: inline-block;
				p{
					color: #FFFFFF;
					font-size: 12px;
					line-height: 28px;
					text-align: center;
				}
			}
			.box3{
				display: inline-block;
				p{
					color: #FFFFFF;
					font-size: 12px;
					line-height: 28px;
					text-align: center;
				}
			}
		}
	}
}


.side{
	z-index: 8;
	overflow: hidden;
	margin-top: -47px;
	position: relative;
}


.inside{
	z-index: 9;
	min-height: 600px;
	position: relative;
	padding-bottom: 100px;
	background-color: #eeeeee;
	border-radius: 45px 45px 0 0;
	box-shadow: 0 0 10px 10px rgb(193,192,191);
	h2{
		width: 570px;
		height: 50px;
		margin: 0 auto;
		font-size: 28px;
		text-align: center;
		line-height: 50px;
		color: #FFFFFF;
		font-weight: bold;
		background: url('../images/icon03.png') no-repeat center/570px 50px;
	}
	h4{
		color: #333;
		font-size: 30px;
		font-weight: bold;
		margin-top: 30px;
		text-align: center;
	}
	.btn-box{
		color: #6e6e6e;
		font-size: 28px;
		text-align: center;
		padding-top: 50px;
		img{
			margin: 10px auto;
			display: block;
		}
		a{
			width: 340px;
			color: #FFFFFF;
			border-radius: 5px;
			line-height: 44px;
			display: inline-block;
			background-color: #0e448c;
			@include transition(.5s);
			&:hover{
				background-color: #0e448c + #111111;
			}
			&:active{
				background-color: #0e448c;
			}
		}
	}
	.text-box{
		// width: 810px;
		width: 100%;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 40px 125px;
		display: inline-block;
		font-size: 20px;
		line-height: 32px;
	}
	.list-box{
		width: 1100px;
		margin: 30px 50px 0;
		.list{
			width: 330px;
			color: #000000;
			float: left;
			margin-bottom: 40px;
			&:hover img{
				transform: translate(-50%, -50%) scale(1.1,1.1);
			}
			&:not(:nth-of-type(3n)){
				margin-right: 55px;
			}
		}
		.img-box{
			width: 330px;
			height: 330px;
			overflow: hidden;
			img{
				width: 100%;
				height: 100%;
				object-fit: cover;
				@include transition(.5s);
			}
			.play{
				width: 330px;
				height: 330px;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 3;
				@include transition(.5s);
				transform: translate(-50%,-50%);
				background: rgba(0,0,0,.3) url('../images/play.png') no-repeat center;
			}
			&:hover .play{
				background-color: rgba(0,0,0,0)
			}
		}
		h3{
			font-size: 18px;
			font-weight: bold;
			letter-spacing: -1px;
			height: 42px;
			@include ellipsis(2);
			margin: 15px 0 22px;
		}
		i{
			height: 16px;
			display: block;
			font-size: 14px;
			line-height: 16px;
			&:empty{
				// margin-bottom: 34px;
			}
		}
		p{
			margin-top: 18px;
			font-size: 14px;
			height: 48px;
			line-height: 16px;
			@include ellipsis(4);
		}
	}
}


.pro-nav{
	top: -20px;
	width: 330px;
	z-index: 9;
	left: calc( 50% - 600px );
	padding: 50px 0;
	position: absolute;
	text-indent: 25px;
	background-color: #c1c0bf;
	border-left: 1px solid rgba(255,255,255,.5);
	h3{
		color: #FFFFFF;
		font-size: 40px;
		text-transform: uppercase;
	}
	.hd{
		&::before{
			position: absolute;
			@include color-block(305px,2px,#ffffff);
		}
		> a{
			font:bold 20px '微软雅黑';
		}
		a{
			text-indent: 0px;
			line-height: 55px;
			display: inline-block;
		}
	}
	.bd{
		a{
			font:20px '微软雅黑';
		}
		li{
			line-height: 55px;
			@include transition(.5s);
			&:hover,&.on{
				color: #FFFFFF;
				background-color: $org;
			}
		}
	}
}


.ab-nav{
	display: none;
	position: absolute;
	width: 330px;
	left: calc( 50% - 600px );
	padding: 50px 0;
	top: -20px;
	overflow: hidden;
	z-index: 9;
	text-indent: 30px;
	background-color: #c1c0bf;
	border-left: 1px solid rgba(255,255,255,.5);
	h3{
		color: #FFFFFF;
		font-size: 40px;
		position: relative;
		text-indent: 0;
		margin-bottom: 10px;
		letter-spacing: -3px;
		text-transform: uppercase;
		transform: scaleX(.8);
		&::after{
			// right: 0;
			left: 0;
			bottom: 0;
			position: absolute;
			@include color-block(999px,2px,#ffffff);
		}
	}
	.hd{
		> a{
			font:bold 20px '微软雅黑';
		}
		a{
			text-indent: 0px;
			line-height: 55px;
			display: inline-block;
		}
	}
	.bd{
		a{
			font:20px '微软雅黑';
		}
		li{
			line-height: 55px;
			@include transition(.5s);
			&:hover,&.on{
				color: #FFFFFF;
				background-color: $org;
			}
		}
	}
}


.crumbs{
	background-color: $blue;
	border-bottom: 10px solid $org;
	padding-left: 27px;
	li{
		float: left;
		padding: 0 20px;
		border-radius: 20px 20px 0 0;
		@include transition(.5s);
		a{
			color: #AAAAAA;
			font-size: 22px;
			line-height: 55px;
			display: inline-block;
			text-transform: uppercase;
		}
		&.on,&:hover{
			background-color: $org;
			a{
				color: #FFFFFF;
			}
		}
		+ li {
			margin-left: 10px;
		}
	}
}


.pro-list{
	padding: 45px 34px;
	.item{
		float: left;
		position: relative;
		margin-bottom: 22px;
		.img-box{
			width: 270px;
			height: 247px;
			-webkit-filter: brightness(75%); /* Chrome, Safari, Opera */
			filter: brightness(75%);
			@include transition(.5s);
		}
		&:hover .img-box{
			-webkit-filter: brightness(100%); /* Chrome, Safari, Opera */
			filter: brightness(100%);
		}
		p{
			top: 50%;
			left: 50%;
			color: #AAAAAA;
			font-size: 26px;
			position: absolute;
			white-space: nowrap;
			@include transition(.5s);
			transform: translate(-50%,-50%);
		}
		&:hover p{
			color: #FFFFFF;
		}
		&:not(:nth-of-type(4n)){
			margin-right: 17px;
		}
	}
}


.shade{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: fixed;
	background-color: rgba(0,0,0,.5);
	z-index:-2;
	opacity: 0;
	@include transition(.5s);
	&.on{
		opacity: 1;
		z-index: 99;
	}
}


.pop{
	top: 50%;
	left: 50%;
	opacity: 0;
	z-index: -1;
	height: 880px;
	padding: 35px;
	border-radius: 15px;
	position: fixed;
	transform: translate(-50%,-50%) scale(0);
	background-color: #FFFFFF;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	@include transition(.5s);
	&.on{
		opacity: 1;
		z-index: 100;
		transform: translate(-50%,-50%) scale(1);
	}
	>a:first-of-type{
		width: 68px;
		height: 60px;
		display: inline-block;
		background: url('../images/logo.png') no-repeat center/cover;
	}
	> form{
		margin-bottom: 10px;
		display: inline-block;
		button{
			border: 0;
			padding: 0;
			width: 30px;
			height: 30px;
			cursor: pointer;
			vertical-align: bottom;
			background: url('../images/icon_09.jpg') no-repeat center/20px 20px;
		}
		input{
			height: 30px;
			width: 295px;
			margin-left: 45px;
			text-indent: 5px;
			border:2px solid #c9c9ca;
			vertical-align: bottom;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	}
	
	> .br{
		position: relative;
		text-align: right;
		> a{
			width: 30px;
			height: 30px;
			display: inline-block;
			background: url('../images/icon_10.jpg') no-repeat center/23px 23px;
		}
		p{
			width: 195px;
			font-size: 20px;
			text-align: center;
			cursor: pointer;
		}
		ul{
			right: 0;
			height: 0;
			width: 195px;
			z-index: 3;
			overflow: hidden;
			position: absolute;
			text-align: center;
			background-color: #a0a0a0;
			@include transition(.5s);
			a{
				color: #FFFFFF;
				font-size: 16px;
				line-height: 30px;
				text-transform: uppercase;
				@include transition(.5s);
			}
			li{
				@include transition(.5s);
				a{
				}
			}
			&.on{
				height: 240px;
			}
			li.on,li:hover{
				background-color: #f1efe0;
				a{
					color: #00a0e9;
				}
			}
		}
	}
	a.br,a.bl{
		line-height: 30px;
		&:hover{
			font-weight: bold;
		}
	}
	
	&.text{
		iframe{
			padding: 25px 40px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
		}
	}
	&.pro > .br p{
		&::after{
			content: '>';
			margin-left: 5px;
			font-weight: bold;
			font-family: '宋体';
			display: inline-block;
			transform: rotate(90deg);
			@include transition(.5s);
		}
		&.on::after{
			transform: rotate(270deg);
		}
	}
}


.window{
	background-color: #eeeeee;
	iframe{
		border: 0;
	}
}


.newsv{
	padding: 30px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	.text-box{
		height: 660px;
		font-size: 16px;
		line-height: 32px;
		overflow-y: scroll;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
}


.multipleColumn{
	width: 1130px;
	height: 730px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px;
	.bd{
		position: relative;
		li{
			float: left;
			margin: 0 17px;
			padding-top: 25px;
			&:hover,&.on{
				.img-box{
					transform: scale(1.2,1.2);
				}
				p{
					color: $blue;
				}
			}
		}
		.img-box{
			width: 180px;
			height: 250px;
			@include transition(.5s);
		}
		p{
			font-size: 18px;
			margin-top: 35px;
			line-height: 25px;
			text-align: center;
			@include transition(.5s);
		}
	}
	.pro-prev,.pro-next{
		top: 50%;
		cursor: pointer;
		font-size: 50px;
		position: absolute;
		font-family: '宋体';
		transform: translateY(-50%);
	}
	.pro-prev{
		left: 0px;
	}
	.pro-next{
		right: 0px;
	}
}


.pedit,.preg,.puser{
	display: none;
}


.prov{
	padding: 33px 28px;
	.bl{
		width: 515px;
	}
	
	h3{
		font-size: 32px;
		font-weight: bold;
		margin-bottom: 30px;
	}
	
	.br{
		.bd{
			position: relative;
			padding: 0 50px;
		}
	}
	
	.img-box{
		width: 355px;
		height: 660px;
		.play{
			width: 355px;
			height: 660px;
			position: absolute;
			top: 50%;
			left: 50%;
			z-index: 3;
			transform: translate(-50%,-50%);
			background: url('../images/play.png') no-repeat center;
		}
	}
	
	.color{
		margin-top: 30px;
		h4{
			color: $blue;
			font-size: 18px;
			line-height: 30px;
			font-weight: bold;
		}
		.hd{
			background-color: #272a34;
		}
		.box{
			display: inline-block;
			border: 1px solid #FFFFFF;
		}
		
		table{
			border: 1px solid #FFFFFF;
			th{
				color: #FFFFFF;
				padding: 0 10px;
				font-size: 16px;
				line-height: 28px;
				background-color: #272a34;
			}
			td{
				line-height: 22px;
				padding: 0 10px;
			}
		}
		.swiper-container{
			width: 100%;
			height: 76px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			.swiper-slide {
				height: auto;
				font-size: 18px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
		}
	}
	.certify{
		height: 55px;
		margin-top: 20px;
		.img-box{
			width: 130px;
			height: 55px;
			float: left;
			margin-right: 15px;
		}
	}
	.prov-prev,.prov-next{
		top: 50%;
		cursor: pointer;
		font-size: 50px;
		position: absolute;
		font-family: '宋体';
		transform: translateY(-50%);
	}
	.prov-prev{
		left: 0px;
	}
	.prov-next{
		right: 0px;
	}
	>p{
		font-size: 16px;
		line-height: 32px;
		.next{
			float: right;
		}
	}
}


.puser{
	padding: 0 30px 15px 0px;
	background-color: #eeeeee;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	.bl{
		margin-top: 65px;
		width: 330px;
		.img-box{
			width: 230px;
			height: 230px;
			border-radius: 50%;
			margin: 0 auto;
			overflow: hidden;
		}
		h3{
			font-size: 32px;
			margin-top: 10px;
			text-align: center;
		}
		a.btn{
			width: 200px;
			height: 22px;
			display: block;
			margin: 0 auto;
			line-height: 22px;
			text-align: center;
			background-color: #c1c0bf;
			@include transition(.5s);
			&:hover{
				color: #FFFFFF;
				background-color: #c1c0bf - #111;
			}
		}
		span{
			display: inline-block;
		}
		.welcome{
			margin: 220px 65px 0;
			span{
				font-size: 28px;
				font-weight: bold;
			}
			p{
				font-size: 20px;
			}
		}
	}
	> .br{
		width: 770px;
		text-align: unset;
		line-height: 32px;
		> ul{
			li{
				padding: 0 10px;
				line-height: 36px;
				display: inline-block;
				@include transition(.5s);
				a{
					color: #7a7a7a;
					i{
						color: #f00;
					}
				}
				&.on{
					color: #FFFFFF;
					background-color: #FFFFFF;
					&::after{
						color: $org;
					}
					a{
						color: #000000;
					}
				}
			}
			&.bd{
				li{
					width: 770px;
					height: 655px;
					background-color: #FFFFFF;
				}
			}
			a{
				font-size: 20px;
			}
		}
		.swiper-container{
			width: 100%;
			height: 655px;
			padding: 30px 20px;
			background-color: #ffffff;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			.swiper-slide {
				height: auto;
				font-size: 18px;
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
			.swiper-scrollbar{
				right: 0;
				width: 2px;
				background-color: #FFFFFF;
			}
			.swiper-scrollbar-drag{
				left: -4px;
				width: 300%;
				border-radius: 0;
				background-color: #b5b6b6;
			}
			.list{
				float: left;
				width: 210px;
				.img-box{
					width: 180px;
					height: 250px;
					overflow: hidden;
					display: inline-block;
					img{
						@include transition(.5s);
					}
					
					&:hover img{
						transform: translate(-50%,-50%) scale(1.1,1.1);
					}
				}
				> a{
					display: inline-block;
				}
				p{
					text-align: center;
				}
				.br{
					width: 20px;
					a{
						float: left;
						width: 20px;
						height: 20px;
						display: inline-block;
						margin-bottom: 10px;
						background: url(../images/icon05.jpg) no-repeat center;
					}
					button{
						float: left;
						width: 20px;
						height: 20px;
						display: inline-block;
						border-width: 0;
						font-size: 0;
						cursor: pointer;
						background: url(../images/icon06.jpg) no-repeat center;
						&:active{
							border: 0 solid #000000;
						}
					}
				}
				&:not(:nth-of-type(3n)){
					margin-right: 40px;
				}
			}
		}
		.msg{
			.list{
				position: relative;
				h3{
					width: 100%;
					padding-right: 110px;
					display: inline-block;
					@include omit();
					color: #FFFFFF;
					line-height: 45px;
					font-size: 25px;
					font-weight: 100;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					border-bottom: 1px solid #FFFFFF;
				}
				span{
					top: 0;
					right: 0;
					color: #FFFFFF;
					font-size: 14px;
					font-weight: 100;
					line-height: 45px;
					position: absolute;
					margin-right: 10px;
				}
				margin: 0;
				width: 100%;
				.item{
					display: none;
					p{
						color: #EEEEEE;
						font-size: 16px;
						text-align: left;
						line-height: 32px;
					}
				}
			}
		}
		.reg{
			color: #FFFFFF;
		}
		.per-data{
			font-size: 20px;
			line-height: 40px;
			padding: 20px;
		}
	}
	.contact{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		.item{
			font-size: 20px;
			line-height: 60px;
			span{
				float: right;
				font-weight: bold;
				letter-spacing: 5px;
			}
		}
		.ibox{
			display: none;
			padding: 15px;
			font-size: 20px;
			background-color: #eeefef;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			&.on{
				display: block;
			}
			form{
				width: 700px;
				margin: 30px 0 0 0;
				textarea{
					width: 565px;
					height: 76px;
					display: inline-block;
					vertical-align: bottom;
				}
				button{
					border: 0;
					width: 105px;
					height: 75px;
					float: right;
					outline: none;
					color: #FFFFFF;
					cursor: pointer;
					background: #c9c9ca;
					display: inline-block;
					vertical-align: bottom;
					@include transition(.5s);
					&:hover{
						background: #c9c9ca - #111111;
					}
				}
			}
		}
	}
}


.form{
	.msg{
		width: 100%;
	}
	input[name='reg']{
		width: 150px;
		margin: 5px 0;
		line-height: 40px;
		text-indent: 25px;
		border: 1px solid #c3c2c2;
		&::placeholder{
			color: #999999;
			font-size: 14px;
		}
	}
	img{
		margin: 5px 0;
		height: 42px;
		object-fit: cover;
	}
	textarea{
		line-height: 40px;
		padding: 0 25px;
		line-height: 52px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
	}
	
}


.preg,.pedit{
	height: 720px;
	width: 1130px;
	position: relative;
	form{
		margin-bottom: 10px;
		display: inline-block;
		button{
			border: 0;
			padding: 0;
			width: 30px;
			height: 30px;
			cursor: pointer;
			vertical-align: bottom;
			background: url('../images/icon_09.jpg') no-repeat center/20px 20px;
			&.btn{
				color: #000;
				display: block;
				width: 300px;
				font-size: 18px;
				height: 50px;
				border-radius: 5px;
				margin: 50px auto;
				border: 2px solid #c9c9ca;
			    background: linear-gradient(#ffffff 0%,#ffffff 49%, #eeefef 50%, #eeefef 100%);
				outline: none;
				@include transition(.5s);
				&:active{
					background: linear-gradient(#eeefef 0%,#eeefef 49%, #ffffff 50%, #ffffff 100%);
				}
			}
		}
	}
	.bl{
		left: 50%;
		top: 50%;
		position: absolute;
		transform: translate(-100%, -50%);
		width: 560px;
		h3{
			font-size: 30px;
			text-align: center;
			padding: 20px;
		}
		
		ul{
			padding-left: 30px;
			margin: 50px 0 30px;
			border-bottom: 2px solid #FFFFFF;
			li{
				float: left;
				width: 145px;
				height: 40px;
				font-size: 20px;
				line-height: 40px;
				text-align: center;
				@include transition(.5s);
				background: url('../images/reg_03.jpg');
				a{
					color: #FFFFFF;
				}
				&:hover,&.on{
					background: url('../images/reg_05.jpg');
				}
				+ li{
					margin-left: 8px;
				}
			}
		}
	}
	.br{
		left: 50%;
		top: 50%;
		position: absolute;
		transform: translate(0%, -50%);
	}
	p{
		display: block;
		.nbox{
			width: 170px;
			font-size: 18px;
			text-align: right;
			margin-right: 10px;
			display: inline-block;
			vertical-align: middle;
		}
		input{
			width: 315px;
			margin: 5px 0;
			text-indent: 5px;
			line-height: 40px;
			vertical-align: middle;
			border: 1px solid #c3c2c2;
		}
	}
}


.page { 
	margin : 40px 0;
	text-align : center;
	font-size : 0px;
	a {
		display : inline-block;
		width : 36px ;
		height : 36px ;
		border-radius : 50% ;
		margin : 0px 7px ;
		color : #666666 ;
		font-size : 15px ;
		text-align : center ;
		line-height : 36px ;
		transition : .5s ;
		background-color: #FFFFFF;
		&.on {
			background-color : #EAC180 ;
			color : #FFFFFF;
		}
		&:nth-of-type(2):hover {
			background-color : #EAC180 ;
			color : #FFFFFF;
		}
		&:nth-of-type(3):hover {
			background-color : #EAC180 ;
			color : #FFFFFF;
		}
		&:nth-of-type(4):hover {
			background-color : #EAC180 ;
			color : #FFFFFF;
		}
		&:nth-of-type(5):hover {
			background-color : #EAC180 ;
			color : #FFFFFF;
		}
	}
	& .prev,& .next{
		background : url('../images/page-1.png') center center no-repeat ;
		margin : 0px 18px ;
		vertical-align : bottom;
	}
	& .next{
		transform : scale(-1);
	}
}


.video{
	width: 100%;
	height: 720px;
	padding: 40px 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	h4{
		font-size: 28px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 30px;
	}
	.video-box,.video-box2{
		width: 1050px;
		height: 600px;
		margin: 0 auto;
		video{
			width: 100%;
			height: 100%;
			outline: none;
		}
		img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		iframe{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
}


.vdialog{
	position: fixed;
	top: 45%;
	left: 50%;
	width: 320px;
	z-index: 9999;
	overflow: hidden;
	font-size: 16px;
	background-color: #fff;
	border-radius: 16px;
	@include transition(.5s);
	transform: scale(0);
	&.on{
		transform: scale(1);
	}
	h3{
		padding-top: 26px;
		font-weight: 500;
		line-height: 24px;
		text-align: center;
	}
	.vdialog_content{
		padding-top: 8px;
		color: #646566;
		.vdialog_message{
			padding: 26px 24px;
			overflow-y: auto;
			font-size: 14px;
			line-height: 20px;
			white-space: pre-wrap;
			text-align: center;
			word-wrap: break-word;
		}
	}
	button{
		width: 50%;
		height: 60px;
		border: 0;
		float: left;
		padding: 1px;
		outline: none;
		cursor: pointer;
		.vbtn_content{
			line-height: 60px;
			background-color: #fff;
		}
		&:active .vbtn_content{
			background-color: #e6e6e6;
		}
		&.vdialog_confirm{
			color: #ee0a24;
		}
	}
}


@media screen and (max-width: 1920px) {
	.header{
		background-size: 100% 100%;
	}
}